<template>
  <div class="man">
    <div class="handle">
      <div class="menu">
        <el-timeline>
          <el-timeline-item placement="top">
            <el-card>
              <h4>用户资料</h4>
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="工号" prop="teaid">
                  <el-input v-model="ruleForm.teaid"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="teaname">
                  <el-input v-model="ruleForm.teaname" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="teasex">
                  <el-select v-model="ruleForm.teasex" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="电话" prop="teatel">
                  <el-input v-model="ruleForm.teatel" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="单位" prop="dept">
                  <el-select v-model="ruleForm.dept" filterable placeholder="请选择(可搜索)">
                    <el-option
                      v-for="item in options"
                      :key="item.dept"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="银行卡" prop="cashcardid">
                  <el-input v-model="ruleForm.cashcardid" placeholder="请输入银行卡号"></el-input>
                </el-form-item>
                <el-form-item label="家庭地址" prop="teaadd">
                  <!-- <el-input v-model="ruleForm.teaadd" placeholder="请输入家庭地址"></el-input> -->
                  <el-select v-model="ruleForm.teaadd" placeholder="请选择活动区域">
                    <el-option label="本部" value="本部"></el-option>
                    <el-option label="本部附近" value="本部附近"></el-option>
                    <el-option label="南区" value="南区"></el-option>
                    <el-option label="南区附近" value="南区附近"></el-option>
                    <el-option label="北区" value="北区"></el-option>
                    <el-option label="北区附近" value="北区附近"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import "@/mock/Admin";
import Message from "@/plugins/message";
import $ from "jquery";

export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      searchName: "",
      options: [
        {
          dept: "选项1",
          label: "信息科学与工程学院"
        },
        {
          dept: "选项2",
          label: "软件学院"
        },
        {
          dept: "选项3",
          label: "外国语学院"
        },
        {
          dept: "选项4",
          label: "数学学院"
        },
        {
          dept: "选项5",
          label: "物理学院"
        }
      ],
      ruleForm: {
        teaid: "",
        teaname: "",
        passwd: "",
        teatel: "",
        teasex: "",
        dept: "",
        cashcardid: "",
        teaadd: ""
      },
      rules: {
        teaid: [
          { required: true, message: "请输入工号", trigger: "blur" },
          { min: 6, max: 6, message: "长度为 6 个字符", trigger: "blur" }
        ],
        teaname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 4, message: "长度为 2 到 4 个字符", trigger: "blur" }
        ],
        passwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "长度为 6 到 12 个字符", trigger: "blur" }
        ],
        teasex: [{ required: true, message: "请选择性别", trigger: "change" }],
        teatel: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度为 11 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.selfInfo();
  },
  methods: {
    selfInfo: function() {
      axios
        .post("Admin/find", { teaids: this.$store.state.teaid })
        .then(res => {
          // console.log(res.data);
          const { code, msg, data } = res.data;
          if (code === 0) {
            this.ruleForm.teaid = data.teaid;
            this.ruleForm.teaname = data.teaname;
            this.ruleForm.teasex = data.teasex;
            this.ruleForm.teatel = data.teatel;
            this.ruleForm.passwd = data.passwd;
            this.ruleForm.dept = data.dept;
            this.ruleForm.cashcardid = data.cashcardid;
            this.ruleForm.teaadd = data.teaadd;
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post("Admin/update", { adminInfo: this.ruleForm }).then(res => {
            console.log(this.ruleForm);
            const { code, msg, item } = res.data;
            const teaid = item.teaid;
            if (code === 0) {
              this.ruleForm = item;
              Message.success(msg);
            } else {
              Message.error("编辑失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
.man {
  position: relative;
  /* border: 1px solid black; */
}
.man .handle {
  /* position: absolute; */
  width: 560px;
  margin: 0 auto 20px;
}
</style>